<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { formatDate } from "@/utils/dateUtil";
import { interceptor } from "@/utils/interceptor";
import { userStore } from "@/stores/userStore";
const router = useRouter();
const userUserStore = userStore();
// 定义一个响应式数组存储 .item 数据
const items = ref([]);
const data = ref([]);

// 定义一个函数来生成随机颜色
const getRandomColor = () => {
  const colors = [
    "rgb(98, 117, 237)",
    "rgb(98, 237, 191)",
    "rgb(237, 186, 98)",
    "rgb(237, 237, 98)",
  ];
  const randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex];
};

onMounted(() => {
  console.log(userUserStore.className);
  const httpInstance = interceptor();

  httpInstance
    .post("/student/course", {
      className: `${userUserStore.className}`,
    })
    .then((res) => {
      console.log(res.data.data);
      // 将后端返回的数据添加到 items 中
      for (let i = 0; i < res.data.data.length; i++) {
        items.value.push({
          id: res.data.data[i].id,
          endTime: formatDate(res.data.data[i].endTime),
          enrolledNumber: res.data.data[i].enrolledNumber,
          imgPath: res.data.data[i].imgPath,
          instructorName: res.data.data[i].instructorName,
          name: res.data.data[i].name,
          startTime: formatDate(res.data.data[i].startTime),
          backgroundColor: getRandomColor(), // 添加随机背景颜色
        });
      }
      console.log("items.value:", items.value);
    });
});

//跳转到详情页面
const goToDetail = (courseId) => {
  router.push({
    name: "studentCourseDetail",
    params: { courseId },
  });
};
</script>

<template>
  <div class="table">
    <!-- 动态渲染 .item -->
    <div
      v-for="item in items"
      :key="item.id"
      class="item"
      :style="{ backgroundColor: item.backgroundColor }"
      @click="goToDetail(item.id)"
    >
      <!--   <img :src= "@/assets/img/780.jpg" /> -->

      <div class="footer">
        <ul>
          <li>
            <h1>{{ item.name }}</h1>
          </li>
          <li>
            开课讲师 <span class="heightlight">{{ item.instructorName }}</span>
          </li>
          <li>
            开课时间 <span class="heightlight">{{ item.startTime }}-{{ item.endTime }}</span>
          </li>
          <li>
            累计选课 <span class="heightlight">{{ item.enrolledNumber }}人次</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table {
  width: 100vw;
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* 固定间距 */
  justify-content: flex-start; /* 左对齐 */

  padding: 4%;
  box-sizing: border-box;
}

.item {
  width: calc(20% - 1.6%); /* 减去间距的影响 */
  /* height: 100%; */
  height: 25vh;
  width: 25vw;

  margin-bottom: 4%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /*控制缩放或位移的动画效果。*/
  cursor: pointer; /* 鼠标悬停时显示手型 */
  &:hover {
    transform: translateY(-10px); /* 向上浮动 10px */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* 加深阴影效果 */
  }
}

.footer {
  margin-top: 5%;
  width: 100%;
  height: 100%;
  li {
    margin-top: 5px;
    margin-bottom: 3px;
    list-style: none;
    color: rgb(237, 237, 237);
    font-size: 130%;
    h1 {
      color: black;
    }
    .heightlight {
      color: black; /* 字体颜色为黑色 */
      font-weight: bold; /* 加粗显示 */
    }
  }
}
</style>
